<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
  <div class="left_view">
    <NCollapse default-expanded-names="Collapse_1" accordion>
      <!-- SVG图元 -->
      <NCollapseItem title="SVG图元" name="Collapse_1">
        <NTooltip placement="bottom" trigger="hover" v-for="item in svgPel">
          <template #trigger>
            <svg class="h_svg_icon" v-if="!item.active" xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="36" height="36" viewBox="0 0 1024 1024"
              v-html="item.disable" @click.stop="menuStore.menuHandle(item.key)"></svg>
            <svg class="h_svg_icon" v-if="item.active" xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="36" height="36" viewBox="0 0 1024 1024"
              v-html="item.enabled" @click.stop="menuStore.menuHandle(item.key)"></svg>
          </template>
          <span>{{ item.label }}</span>
        </NTooltip>
      </NCollapseItem>

      <!-- DIV图元 -->
      <NCollapseItem title="DIV图元" name="Collapse_3">
        <NTooltip placement="bottom" trigger="hover" v-for="DIVItem in divPel">
          <template #trigger>
            <svg class="h_tool_icon" v-if="!DIVItem.active" xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="36" height="36" viewBox="0 0 1024 1024"
              v-html="DIVItem.disable" @click="menuStore.menuHandle(DIVItem.key)"></svg>
            <svg class="h_tool_icon" v-if="DIVItem.active" xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="36" height="36" viewBox="0 0 1024 1024"
              v-html="DIVItem.enabled" @click="menuStore.menuHandle(DIVItem.key)"></svg>
          </template>
          <span>{{ DIVItem.label }}</span>
        </NTooltip>
      </NCollapseItem>
      <!-- 组件 -->
      <NCollapseItem title="组件" name="Collapse_4">
        <NTooltip placement="bottom" trigger="hover" v-for="Item in componertPel">
          <template #trigger>
            <svg class="h_svg_icon" v-if="!Item.active" xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="36" height="36" viewBox="0 0 1024 1024"
              v-html="Item.disable" @click.stop="menuStore.menuHandle(Item.key)"></svg>
            <svg class="h_svg_icon" v-if="Item.active" xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="36" height="36" viewBox="0 0 1024 1024"
              v-html="Item.enabled" @click.stop="menuStore.menuHandle(Item.key)"></svg>
          </template>
          <span>{{ Item.label }}</span>
        </NTooltip>
      </NCollapseItem>


    </NCollapse>
  </div>
</template>

<script setup lang="ts">
import { NCollapse, NCollapseItem, NTooltip } from "naive-ui"
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { storeToRefs } from "pinia";
import { useMenuStore } from "@/store/menuStore"; // 菜单

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const menuStore = useMenuStore(); // 菜单
/** 解构存储*/
const { svgPel, divPel, componertPel } = storeToRefs(menuStore);
</script>

<style lang="scss" scoped>
/* 引入共用css */
@import "@/assets/h.scss";

//左边嵌入面板_绘制图标
.left_view {
  width: 100%;
  height: 100%;
  background-color: rgb(80, 80, 80);
  user-select: none;
}

/** 工具图标 */
.h_tool_icon {
  margin: 1px;
  padding: 1px;
  height: 36px;
  width: 36px;
}
</style>
